<template>
  <div class="app-container">
    <el-card shadow="never" class="mb20">
      <el-row>
        <el-col>
          <label class="radio-label">布局名称：</label>
          <el-input v-model="listQuery.name" clearable placeholder="请输入布局名称" style="width: 200px;" class="filter-item" @input="handleFilter" />
        </el-col>
      </el-row>
    </el-card>
    <el-table
      ref="printLayout"
      v-loading="listLoading"
      :data="filterList"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
      @row-click="handleRow"
      >
      <el-table-column prop="name" sortable label="布局名称" min-width="150" align="center"></el-table-column>
      <el-table-column prop="updateDate" sortable label="修改时间" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.updateDate | moment('YYYY-MM-DD HH:mm:ss') }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { loadReportProviders } from '@/api/ureport/designer'
export default {
  data() {
    return {
      listQuery: {
        name: ''
      },
      list: [],
      filterList: [],
      listLoading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    setCurrent(row) {
      this.$refs.printLayout.setCurrentRow(row);
    },
    fetchData() {
      this.listLoading = true
      loadReportProviders().then(response => {
        if (response && response.length) {
          response.forEach(item => {
            if(item.prefix === '1:'){
              this.list = item.reportFiles ? item.reportFiles : []
              this.handleFilter()
            }
          })
        }
        this.listLoading = false
      })
    },
    handleFilter() {
      this.filterList = this.list.filter( item => (item.name + '').indexOf(this.listQuery.name) >= 0)
    },
    handleRow(row) {
      this.$emit('callbackPrintLayout', row)
    }
  }
}
</script>
